<!--
  功能：rgb颜色获取工具
  时间：2024年10月18日 14:13:14
-->
<template>
  <el-tooltip
    class="box-item"
    effect="dark"
    content="不会影响任何配置，只用来获取rgb颜色工具"
    placement="right"
  >
    <div style="margin-left: 10px">
      <el-color-picker
        @change="changeColor"
        v-model="color"
        :predefine="predefineColors"
      />
    </div>
  </el-tooltip>
</template>

<script lang="ts" setup>
import { copy } from "@/common/tool";
import { ElMessage } from "element-plus";
const color = ref("rgba(35,38,57,1)");
const predefineColors = [
  "rgb(35,38,57,1)",
  "rgb(0,90,117)",
  "rgba(163,32,0,1)",
];
//转换颜色
function colorRgba(sHex: string) {
  // 十六进制颜色值的正则表达式
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/;
  /* 16进制颜色转为RGB格式 */
  var sColor = sHex.toLowerCase();
  var alpha: any = 1;
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4 || sColor.length === 5) {
      var sColorNew = "#";
      for (var i = 1; i < sColor.length; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
      }
      sColor = sColorNew;
    }
    // 如果有透明度再执行
    if (sColor.length === 9) {
      alpha = (parseInt("0x" + sColor.slice(7, 9)) / 255).toFixed(2);
    }
    //  处理六位的颜色值
    var sColorChange = [];
    for (var i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
    }
    return "rgba(" + sColorChange.join(",") + "," + alpha + ")";
  } else {
    return sColor;
  }
}
//获取颜色
function changeColor(value: string) {
  let color = colorRgba(value);
  copy(color).then(() => {
    ElMessage({
      message: `已复制色值 ${color} 到剪贴板`,
      type: "info",
    });
  });
}
</script>

<style scoped lang="scss"></style>
